<template>
    <el-popover placement="bottom" trigger="click" :visible-arrow="false"
                popper-class="table_popper" :ref="'table_popper_' + column.prop">
        <div slot>
            <div class="search_content">
                <el-form ref="search_form" :model="searchForm" label-width="0px" size="mini"
                         @submit.native.prevent>
                    <el-card>
                        <div slot="header" class="clearfix">
                            <el-divider content-position="left">查询条件</el-divider>
                            <el-form-item prop="searchValue" v-if="searchOpt.type === 'input'">
                                <el-input v-model="searchForm.searchValue" clearable
                                          @keyup.enter.native="handleClick"></el-input>
                            </el-form-item>
                            <el-form-item prop="searchValue" v-if="searchOpt.type === 'radio'">
                                <el-radio-group v-model="searchForm.searchValue">
                                    <el-radio :label="item.value" v-for="(item, index) in searchOpt.items" :key="index">
                                        {{item.name}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="searchValue" v-if="searchOpt.type === 'checkbox'">
                                <el-checkbox-group v-model="searchForm.searchValue">
                                    <el-checkbox :label="item.value" v-for="(item, index) in searchOpt.items" :key="index">
                                        {{item.name}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item prop="searchValue" v-if="searchOpt.type === 'select'">
                                <el-select v-model="searchForm.searchValue">
                                    <el-option v-for="(item, index) in searchOpt.items" :key="index"
                                               :label="item.name" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="searchValue" v-if="searchOpt.type === 'date'">
                                <el-date-picker v-model="searchForm.searchValue" type="date" value-format="yyyy-MM-dd" />
                            </el-form-item>
<!--                            <el-form-item prop="searchValue" v-if="searchOpt.type === 'dateRange'">-->
<!--                                <el-date-picker v-model="searchForm.searchValue"-->
<!--                                                type="daterange"-->
<!--                                                range-separator="至"-->
<!--                                                start-placeholder="开始日期"-->
<!--                                                end-placeholder="结束日期" />-->
<!--                            </el-form-item>-->
                        </div>
                        <div class="search_card_content">
                            <el-button type="primary" @click="handleClick">查询</el-button>
                        </div>
                    </el-card>
                </el-form>
            </div>
        </div>
        <div class="custom_title" slot="reference">
            <div class="custom">{{column.label}}</div>
            <i class="el-icon-search search_icon"></i>
        </div>
    </el-popover>
</template>

<script>
    export default {
        name: "TableSearch",
        props: {
            options: {
                type: Object,
                default: {}
            }
        },
        data () {
            return {
                defaultOpt: {
                    type: 'input',
                },
                searchForm: {
                    searchValue: '',
                },
                searchOpt: {},
                column: {},
                headColumn: {},
                baseLabel: '',
            };
        },
        watch: {
            column() {
                this.initData();
            },
        },
        mounted () {
            this.initData();
        },
        methods: {
            initData() {
                if (this.options.h) {
                    this.column = this.options.column;
                    this.baseLabel = this.options.label;
                    if (this.options.cache.length === 0) {
                        this.column.label = this.baseLabel;
                    }
                    this.searchOpt = $.extend({}, this.defaultOpt, this.column.search, {
                        prop: this.column.prop,
                    });
                    if (this.searchOpt.type === 'checkbox') {
                        this.searchForm.searchValue = [];
                    } else {
                        this.searchForm.searchValue = '';
                    }
                }
            },
            handleClick() {
                let searchData = {};
                if (this.$utils.isNotEmpty(this.searchForm.searchValue)) {
                    let name = this.searchForm.searchValue;
                    if (this.searchOpt.type === 'checkbox') {
                        let names = this.searchOpt.items
                            .filter(item => this.searchForm.searchValue.indexOf(item.value) !== -1)
                            .map(item => item.name);
                        name = names.join(',');
                    }
                    let op = 'eq';
                    if (this.searchOpt.type === 'input') {
                        op = 'like';
                    } else if (this.searchOpt.type === 'checkbox') {
                        op = 'list';
                    } else if (this.searchOpt.type === 'date' || this.searchOpt.type === 'datetime') {
                        op = 'date';
                    } else if (this.searchOpt.type === 'dateRange') {
                        op = 'dateRange';
                    }
                    searchData = {
                        field: this.searchOpt.prop,
                        value: this.searchForm.searchValue,
                        name: name,
                        op,
                    };
                    if (this.searchOpt.type === 'dateRange' && this.searchForm.searchValue.length === 2) {
                        searchData.beginDate = this.$utils.formatDate(this.searchForm.searchValue[0], 'yyyy-MM-dd');
                        searchData.endDate = this.$utils.formatDate(this.searchForm.searchValue[1], 'yyyy-MM-dd');
                    }
                    this.column.label = name;
                } else {
                    searchData = {
                        field: this.searchOpt.prop,
                        type: 'clear',
                    };
                    this.column.label = this.baseLabel;
                }
                this.$emit('searchOperate', searchData);
                this.closePopper();
            },
            closePopper() {
                let ref = this.$refs['table_popper_' + this.column.prop];
                if (typeof ref.doClose === 'function') {
                    ref.doClose();
                } else {
                    if (typeof ref[0].doClose === 'function') {
                        ref[0].doClose();
                    }
                    if (typeof ref[1].doClose === 'function') {
                        ref[1].doClose();
                    }
                }
            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .search_content {
        min-width: 250px;

        .el-form {
            .el-form-item--mini {
                margin-bottom: 5px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        /deep/ .el-card__header {
            padding-top: 0;

            .el-divider--horizontal {
                margin: 15px 0;

                .el-divider__text {
                    padding: 0 5px;

                    &.is-left {
                        left: 15px;
                    }
                }
            }
        }

        .search_card_content {
            text-align: right;

            .el-button--small {
                padding: 7.5px 8px;

                &+.el-button {
                    margin-left: 5px;
                }
            }
        }
    }
</style>
